﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>产品</title>
    <link rel="stylesheet" href="../../Content/css/product.css" />
</head>
<body>
    <!--操作块-->
    <div class="operation-box">
        <span class="b1" onclick="location.href = 'Index.html'"></span>
        <span class="b2" onclick="location.href = 'Index.html'"></span>
        <span class="b3" onclick="location.href = ''"></span>
    </div>
    <!--内容块-->
    <div class="content-box">
        <div class="content" style="text-align:center;">
            <div style="text-align: left; width: 71%; margin: 0px auto; font-size: 37px; font-weight: bold; padding-bottom:5px;" id="maxTitle">
            </div>
            <img class="il" id="maxImg" src="" alt="" />
            <!--<div class="text-box">
                <span id="maxTitle" style="color:blue; font-size:30px"></span>
                <div id="maxTxt" class="text">
                    Product description
                </div>
            </div>-->
        </div>
    </div>
    <div class="carousel-box">
        <a class="al" href="javascript:;"></a>
        <div class="img-box">
            <ul id="liContent" class="img-list">
                <li class="on"><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
            </ul>
            <script id="tpl-row1" type="text/html">
                {{each ApiParamObj as value i}}
                <li>
                    <img class="huaPic" src="{{value.CoverURL}}" alt="{{value.Title}}" />
                    <div style="display:none;">{{value.HTML}}</div>
                </li>
                {{/each}}
            </script>
        </div>
        <a class="ar" href="javascript:;"></a>
    </div>
    <script src="../../Content/js/jquery-1.8.3.min.js"></script>
    <script src="/Scripts/arttemplate.js"></script>
    <script>
        $(function () {
            /* 根据图片的数量设置宽度 */

            $.ajax({
                url: '/api/CommonApi?API=Corey_GetNewsByColumnID',
                type: 'get',
                data: { ColumnID: 'e337afce-cc39-4dc1-bc05-8c48b905c51e' },
                dataType: 'json',
                success: function (data) {
                    if (data.Success) {
                        if (data.ApiParamObj.length > 0) {
                            $('#liContent').html(template('tpl-row1', data));

                            initialize();
                            hua();

                        }
                    }
                }
            });



            function initialize() {
                var lw = $(".img-list li:eq(0)").width() + 41,
                    llength = $(".img-list li").length;
                //图片数量小于5长度进行判断
                if (llength < 5) {
                    $(".img-box").css({
                        "width": (llength * lw - 30) + "px"
                    });
                    $(".carousel-box").css({
                        "width": (204 + llength * lw - 30) + "px"
                    });
                } else {
                    $(".img-list").css({
                        "width": (llength * lw) + "px"
                    });
                }
                var coordinate = 0;
                $(".img-list li").eq(coordinate).addClass("on");

                $("#maxImg").attr("src", $(".img-list li").eq(coordinate).find("img").attr("src"));
                //$("#maxTxt").html($(".img-list li").eq(coordinate).find("div").text());
                $("#maxTitle").html($(".img-list li").eq(coordinate).find("img").attr("alt"));
            }
            //滑动效果
            function hua() {
                var coordinate = 0,
                        liL = $(".img-list li").length - 1;

                $(".huaPic").click(function () {
                    $(".img-list li").removeClass("on");
                    $(this).parent().addClass("on");

                    $("#maxImg").attr("src", $(this).parent().find("img").attr("src"));
                    //$("#maxTxt").html($(this).parent().find("div").text());
                    $("#maxTitle").html($(this).parent().find("img").attr("alt"));


                });

                $(".al").click(function () {
                    if (coordinate > 0) {
                        coordinate -= 1;
                        if (liL - coordinate > 4) {
                            $(".img-list").stop();
                            $(".img-list").animate({ left: -coordinate * 291 + "px" }, "slow", function () {
                                $(".img-list li").removeClass("on");
                                $(".img-list li").eq(coordinate).addClass("on");
                            });
                        } else {
                            $(".img-list li").removeClass("on");
                            $(".img-list li").eq(coordinate).addClass("on");
                        }
                        $("#maxImg").attr("src", $(".img-list li").eq(coordinate).find("img").attr("src"));
                        //$("#maxTxt").html($(".img-list li").eq(coordinate).find("div").text());
                        $("#maxTitle").html($(".img-list li").eq(coordinate).find("img").attr("alt"));
                    }


                });
                $(".ar").click(function () {
                    if (coordinate < liL) {
                        coordinate += 1;
                        if (liL - coordinate < 4) {
                            $(".img-list li").removeClass("on");
                            $(".img-list li").eq(coordinate).addClass("on");
                        } else {
                            $(".img-list").stop();
                            $(".img-list").animate({ left: -coordinate * 291 + "px" }, "slow", function () {
                                $(".img-list li").removeClass("on");
                                $(".img-list li").eq(coordinate).addClass("on");
                            });
                        }
                        $("#maxImg").attr("src", $(".img-list li").eq(coordinate).find("img").attr("src"));
                        //$("#maxTxt").html($(".img-list li").eq(coordinate).find("div").text());
                        $("#maxTitle").html($(".img-list li").eq(coordinate).find("img").attr("alt"));
                    }
                });
            }

        });
    </script>
</body>
</html>